<!-- 录入和查看页面 -->
<template>
  <f7-page id="view">
    <f7-navbar :title="context.textname" back-link>
      <div class="right">
        <f7-link icon-fa="ellipsis-h" popover-open=".select-sheet"></f7-link>
      </div>
    </f7-navbar>
    <village class="view-content" :status.sync="context.status" v-if="context.type === 0"></village>
    <house class="view-content" :status.sync="context.status" v-if="context.type === 1"></house>
    <practicable class="view-content" :status.sync="context.status" v-if="context.type === 2"></practicable>
    <checklist class="view-content" :status.sync="context.status" v-if="context.type === 3"></checklist>
    <f7-row class="bottom">
      <f7-col>
        <f7-button outline round color="blue" @click="gopage(0)" :disabled="pageInfo.cur == 1">上一页</f7-button>
      </f7-col>
      <f7-col>
        <f7-button outline round color="blue" @click="gopage(1)" :disabled="pageInfo.cur == pageInfo.count">下一页</f7-button>
      </f7-col>
      <f7-col>
        <f7-button fill color="orange" popover-open=".popover-camera">照片</f7-button>
      </f7-col>
      <f7-col v-if="(context.status === 0 || context.status === 1) && context.edit">
        <f7-button fill color="blue" @click="save">保存</f7-button>
      </f7-col>
      <f7-col v-if="context.status === 0 && context.type === 3 && role.find(item => item.id === 1)">
        <f7-button fill color="blue" @click="submit(3)">提交</f7-button>
      </f7-col>
      <f7-col v-if="context.status === 3 && context.page === 'backlog' && role.find(item => item.id === 1)">
        <f7-button fill color="blue" @click="submit(4)">转办</f7-button>
      </f7-col>
      <f7-col v-if="context.status === 4 && context.page === 'backlog' && role.find(item => item.id === 2)">
        <f7-button fill color="blue" @click="submit(5)">转办</f7-button>
      </f7-col>
      <f7-col v-if="context.status === 5 && context.page === 'backlog' && role.find(item => item.id === 4)">
        <f7-button fill color="blue" @click="submit(6)">处理</f7-button>
      </f7-col>
    </f7-row>
    <f7-sheet class="select-sheet" :opened="sheetOpened" @sheet:closed="sheetOpened = false">
      <f7-toolbar>
        <div class="left">选择跳转到目标页</div>
        <div class="right">
          <f7-link sheet-close>取消</f7-link>
        </div>
      </f7-toolbar>
      <f7-page-content>
        <f7-list class="no-margin">
          <f7-list-item radio :title="'第' + i + '页'" name="pagenum" v-for="i in pageInfo.count" :key="i" :checked="i == pageInfo.cur" @click="chosepage(i)"></f7-list-item>
        </f7-list>
      </f7-page-content>
    </f7-sheet>
    <f7-popover class="popover-camera">
      <f7-list>
        <f7-list-item link popover-close title="拍摄图片" v-show="(context.status === 0 || context.status === 1) && context.edit" @click="camera(0)"></f7-list-item>
        <f7-list-item link popover-close title="选择图片" v-show="(context.status === 0 || context.status === 1) && context.edit" @click="camera(1)"></f7-list-item>
        <f7-list-item link popover-close title="查看图片" @click="viewphoto"></f7-list-item>
      </f7-list>
    </f7-popover>
  </f7-page>
</template>
<script>
import { f7Page, f7Navbar, f7Toolbar, f7Link, f7View, f7Row, f7Col, f7Button, f7Sheet, f7PageContent, f7List, f7ListItem, f7Popover } from 'framework7-vue'
import { mapState, mapActions } from 'vuex'
import formatdate from 'utils/formatdate'
import village from './village'
import house from './house'
import practicable from './practicable'
import checklist from './checklist'
export default {
  components: {
    f7Page,
    f7Navbar,
    f7Toolbar,
    f7Link,
    f7View,
    f7Row,
    f7Col,
    f7Button,
    f7Sheet,
    f7PageContent,
    f7List,
    f7ListItem,
    f7Popover,
    village,
    house,
    practicable,
    checklist
  },
  computed: {
    ...mapState({
      pageInfo: state => state.page,
      role: state => state.user.role
    })
  },
  data() {
    return {
      sheetOpened: false,
      context: this.$f7route.context,
      // photos: []
    }
  },
  methods: {
    ...mapActions([
      'update_page'
    ]),
    gopage(type) {
      this.$root.$emit('gopage', type)
    },
    save() {
      this.$root.$emit('save')
    },
    chosepage(i) {
      this.update_page({ count: this.pageInfo.count, cur: i })
      this.$$('.sheet-backdrop').click()
    },
    camera(type) {
      this.$root.$emit('save', id => {
        window.navigator.camera.getPicture(imageData => {
          const template = `<div class="text-align-center">
                              <img src="data:image/jpeg;base64,${imageData}" height="200">
                              <textarea id="img-description" placeholder="请填写图片说明"></textarea>
                            </div>`
          this.$f7.dialog.confirm(template, '确定上传文件', () => {
            this.upload(imageData, id, this.$$('#img-description').val(), this.context.type)
          })
        }, () => {}, {
          destinationType: Camera.DestinationType.DATA_URL,
          sourceType: Camera.PictureSourceType[type ? 'SAVEDPHOTOALBUM' : 'CAMERA']
        })
      })
    },
    async viewphoto() {
      const { data } = await this.request('/getphoto', { id: this.$root.requestId || this.context.id, type: this.context.type })
      const photos = data ? data.map(item => {
        return {
          url: window.baseUrl + item.src,
          caption: item.description + '(' + formatdate(new Date(item.time), 'yyyy-MM-dd hh:mm') + ')'
        }
      }) : []
      if (photos.length === 0) {
        this.$f7.toast.show({ text: '暂无照片，请上传' })
      } else {
        var photoBrowserPopup = this.$f7.photoBrowser.create({
          photos,
          type: 'popup',
          navbarOfText: '-'
        });
        photoBrowserPopup.open()
      }
    },
    submit(state) {
      this.$root.$emit('submit', state)
    }
  }
}
</script>